<%-- 
    Document   : main_tree
    Created on : 2018-10-30, 16:29:52
    Author     : yaohk
--%>

<%@page import="com.cmti.commons.web.AuthenticationFilter"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<%
    pageContext.setAttribute("loginUser", session.getAttribute(AuthenticationFilter.AUTH_INFO));
%>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>管理系统</title>
        <%@include file="/WEB-INF/jspf/layui/top_layui.jspf" %>
        <link rel="stylesheet" href="${contextPath}/layui/css/main.css" media="all"/>
    </head>
    <body class="layui-layout-body">
        <script type="text/javascript">
            $("body").mask({
                maskMsg: '<div class="loading_text"><img src="${contextPath}/resources/images/loading_2.gif"/><span>正在初始化，请稍后...</span></div>',
                opacity: 1
            });
            $(document).ajaxError(new jQueryAjaxErrorHandler());
            $(function () {
                $("body").mask('hide');
            });
        </script>
        <div class="layui-layout layui-layout-admin">
            <!--头部区域-->
            <div class="layui-header" style="">
                <ul class="layui-nav layui-layout-left">
                    <li class="layui-nav-item" lay-unselect>
                        <a href="javascript:;" title="侧边伸缩" id="stretch">
                            <i class="layui-icon layui-icon-shrink-right"></i>
                        </a>
                    </li>
                    <li class="layui-nav-item" lay-unselect>
                        <a href="javascript:;"  title="刷新" id="refresh">
                            <i class="layui-icon layui-icon-refresh-3"></i>
                        </a>
                    </li>
                </ul>

                <ul class="layui-nav layui-layout-right" lay-filter="layadmin-layout-right">
                    <!--                    <li class="layui-nav-item" lay-unselect>
                                            <a href="javascript:;" >
                                                <i class="layui-icon layui-icon-theme"></i> 
                                            </a>
                                            <dl class="layui-nav-child">
                                            </dl>
                                        </li>-->
                    <li class="layui-nav-item" lay-unselect>
                        <a href="javascript:;">
                            <cite>${loginUser.name}</cite>
                        </a>
                        <dl class="layui-nav-child" style="padding: 0; line-height: 50px;">
                            <dd id="btnUpdatePwd"><a>修改密码</a></dd>
                            <dd id="btnLogout"><a>退出系统</a></dd>
                            <!--style="text-align: center;"-->
                        </dl>
                    </li>
                    <li class="layui-nav-item layui-show-xs about" lay-unselect id="about">
                        <a href="javascript:;" lay-event="about"><i class="layui-icon layui-icon-more-vertical"></i></a>
                    </li>
                    <!--                    <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-unselect>
                                            <a href="javascript:;" lay-event="more"><i class="layui-icon layui-icon-more-vertical"></i></a>
                                        </li>-->
                </ul>
            </div>

            <!--侧边菜单-->
            <div class="layui-side layui-side-menu layui-bg-black" style="top: 0px;z-index: 1001;">
                <div class="layui-side-scroll">
                    <div class="layui-logo" lay-href="" style="">
                        <img src="${contextPath}/resources/images/cmti.png" style="width: 200px;height: 50px;margin-top: -12px; background-color: #fff;"/>
                        <span><i class="layui-icon layui-icon-layouts">&nbsp;</i>导航菜单</span>
                    </div>
                    <ul class="layui-nav layui-nav-tree" lay-shrink="all" id="side_menu" lay-filter="side_menu_filter" style="top:110px;">
                        <c:forEach items="${navMenu}"  var="rs">
                            <li data-name="home" class="layui-nav-item layui-nav-itemed">
                                <c:if test="${empty rs.children}">
                                    <a lay-href="${rs.attributes.url}" lay-title="${rs.text}" lay-id="${rs.id}">
                                        ${rs.text}
                                    </a>
                                </c:if>
                                <c:if test="${not empty rs.children}">
                                    <a href="javascript:;" lay-tips="${rs.text}">
                                        <i class="layui-icon layui-icon-home"></i>
                                        <cite>${rs.text}</cite>
                                    </a>
                                    <dl class="layui-nav-child">
                                        <c:forEach items="${rs.children}" var="children">
                                            <dd data-name="${children.attributes.url}" style="padding-left: 15px;">
                                                <a lay-href="${children.attributes.url}" lay-id="${children.id}" lay-title="${children.text}">
                                                    <!--<i class="layui-icon layui-icon-list"></i>--> 
                                                    ${children.text}
                                                </a>
                                            </dd>
                                        </c:forEach>
                                    </dl>
                                </c:if>
                            </li>
                        </c:forEach>
                    </ul>
                </div>
            </div>  

            <!--页面标签-->
            <!--layadmin-pagetabs-->
            <div class="tab" id="" style="">
                <div class="layui-tab layui-tab-brief" lay-unauto lay-allowClose="true" lay-filter="tabs" style="margin: 0;">
                    <ul class="layui-tab-title" id="tab_title" >
                        <li lay-id="-1" class="layui-this"><i class="layui-icon layui-icon-home"></i></li>
                    </ul>
                    <div class="layui-tab-content" id="tab_context" style="">
                        <div class="layui-tab-item layui-show" lay-id="0">
                            <iframe src="${contextPath}/home" frameborder="0" id="home"></iframe>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <form class="layui-form" style="display: none;" id="resetPwd">
            <div class="layui-form-item">
                <div class="layui-input-block" style="margin-left: 10px; margin-top: 10px; width: 280px;">
                    <!--<div class="showPwd" style="transform:rotate(-90deg); width: 36px; height: 16px; position: absolute; right: 0px; top: 0px;"><a><i class="layui-icon layui-icon-voice"></i></a></div>-->
                    <input type="password" name="pwd" id="pwd" required  lay-verify="required" placeholder="旧密码" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block" style="margin-left: 10px; width: 280px;">
                    <!--<div class="showPwd" style="transform:rotate(-90deg); width: 36px; height: 16px; position: absolute; right: 0px; top: 0px;"><a><i class="layui-icon layui-icon-voice"></i></a></div>-->
                    <input type="password" name="newPwd" id="newPwd" required  lay-verify="required" placeholder="新密码" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block" style="margin-left: 10px; width: 280px;">
                    <!--<div class="showPwd" style="transform:rotate(-90deg); width: 36px; height: 16px; position: absolute; right: 0px; top: 0px;"><a><i class="layui-icon layui-icon-voice"></i></a></div>-->
                    <input type="password" name="confirmedPwd" id="confirmedPwd" required  lay-verify="required"  placeholder="确认密码" autocomplete="off" class="layui-input">
                </div>
            </div>
        </form>

        <!--底部内容-->
        <div class="details" style="width:240px; position: fixed;top: 50px; right: 0;bottom: 0;z-index: 1001; text-align: center;background-color: #fff;display: none;">
            <!--<div class="details" style="display: none;">-->
            <br/>
            <p><img src="${contextPath}/resources/images/cmti.png"/></p><br/>
            <p><span id="timeshowId"></span></p><br/>
            <p><span>© 2012-2013 Powered by <a href="http://www.haonengzhao.com" target="_black">CMTI</a></span></p><br/>
            <p><span><a href="http://www.haonengzhao.com" target="_black">福州云动科技版权所有</a></span></p><br/>
            <p><span>技术支持：18950295137</span></p>
        </div>
        <!-- 辅助元素，一般用于移动设备下遮罩 -->
        <div class="body-shade"></div>
        <script type="text/javascript">
            layui.use(['element', 'layer', 'form'], function () {
                var element = layui.element;
                var layer = layui.layer;
                var form = layui.form;
                element.render(); //重新渲染侧边栏
                $('.body-shade').hide();
                //              触发事件
                var active = {
                    tabAdd: function (id, title, url) {
                        var iframeId = url.split('/')[1];
//                        console.log(id)
                        //新增一个Tab项
                        element.tabAdd('tabs', {
                            title: title,
                            content: '<div class="layui-tab-item layui-show" lay-id="' + id + '"><iframe src="${contextPath}' + url + '" frameborder="0" name="' + iframeId + ' " id="' + iframeId + '"></ifram></div>',
                            id: id
                        });
                    },
                    tabDelete: function (id) {
                        //删除指定Tab项
                        element.tabDelete('tabs', id);
                    },
                    tabChange: function (id) {
                        //切换到指定Tab项
//                        tabId = id;
                        element.tabChange('tabs', id);
                    }
                };
//                监听侧边栏的点击
                element.on('nav(side_menu_filter)', function (elem) {
                    var id = $(this).attr('lay-id');
                    var title = $(this).attr('lay-title');
                    var url = $(this).attr('lay-href');
                    //浏览器宽度小于980且侧边栏菜单的lay-href的值存在
                    if ($(window).width() < 980 && url !== undefined) {
                        $('.body-shade').hide();//隐藏遮盖层
                        $('.tab,.layui-layout-left').animate({left: '0px'});
                        $('.layui-side,.layui-side-scroll,.layui-side-scroll .layui-nav').animate({width: '0px'});//设置侧边栏的宽度
                        $('#stretch i').addClass('layui-icon-spread-left');
//                        $('#stretch i').removeClass('layui-icon-shrink-right');
                    }

                    if (id === undefined || title === undefined || url === undefined)
                        return false;
                    //判断该tab是否存在
                    var result = false;
                    $.each($('.layui-tab-title li'), function () {
                        if ($(this).attr('lay-id') === id) {
                            result = true;
                        }
                    });
                    if (!result) {
                        active.tabAdd(id, title, url);
                    }
                    active.tabChange(id);
                });
                var tabId = -1; //单前标签页的lay-id 默认值为-1
                element.on('tab(tabs)', function () {//监听选项卡的切换
                    tabId = $(this).attr('lay-id');
                });
                //刷新当前子页面
                $('#refresh').click(function () {
                    $('#tab_context').find('div').each(function () {
                        if (tabId === $(this).attr('lay-id')) {
                            document.getElementById($(this).children().attr('id')).contentWindow.location.reload(true);
                        }
                    });
                });
//                //左侧导航栏缩进与伸出
                $('#stretch').click(function () {
                    stretch();
                });
                function stretch() {
                    var dom = $('#stretch').find('i');
                    if (dom.attr('class') === 'layui-icon layui-icon-shrink-right') {
                        //缩进
                        dom.removeClass('layui-icon-shrink-right').addClass('layui-icon-spread-left');//缩进伸出图片的改变
                        //隐藏侧边栏的详细 只显示一级菜单的图标
                        $('.layui-side-scroll .layui-logo,.layui-side-scroll .layui-nav-child,.layui-side-scroll cite,.layui-side-scroll .layui-nav-more').css("display", "none");
                        $('.layui-side,.layui-side-scroll,.layui-side-scroll .layui-nav').animate({width: '60px'});//设置侧边栏的宽度
                        $('.tab,.layui-layout-left').animate({left: '60px'});
                    } else {
                        //伸出
                        dom.removeClass('layui-icon-spread-left').addClass('layui-icon-shrink-right');
                        $('.layui-side-scroll .layui-logo,.layui-side-scroll .layui-nav-child,.layui-side-scroll cite,.layui-side-scroll .layui-nav-more').css("display", "");
                        $('.layui-side,.layui-side-scroll,.layui-side-scroll .layui-nav').animate({width: '200px'});
                        $('.tab,.layui-layout-left').animate({left: '200px'});
                        element.render(); //重新渲染侧边栏
                        if ($(window).width() < 980) {
                            $('.body-shade').show();//开启遮盖层
                        }
                    }
                }
                //侧边栏缩进 鼠标滑时显示其一级菜单的名字 点击时伸出侧边栏
                $('.layui-side-scroll .layui-nav-item').mouseenter(function () {
                    var that = $(this);
                    if ($('#stretch').find('i').attr('class') === 'layui-icon layui-icon-spread-left') {
                        layer.tips(that.find('a').attr('lay-tips'), $(this), {time: 1000});
                    }
                }).click(function () {
                    if ($('#stretch').find('i').attr('class') === 'layui-icon layui-icon-spread-left') {
                        stretch();
                    }
                });

                //浏览器宽度变化时触发
                $(window).resize(function () {
                    $('.body-shade').hide();
                    if ($(this).width() < 980 && $('#stretch i').attr('class') === 'layui-icon layui-icon-shrink-right') {
                        $('#stretch').find('i').removeClass('layui-icon-shrink-right').addClass('layui-icon-spread-left');
                        $('.layui-side,.layui-side-scroll,.layui-side-scroll .layui-nav').animate({width: '0px'});//设置侧边栏的宽度
                        $('.tab,.layui-layout-left').animate({left: '0px'});
                    } else if ($(this).width() >= 980 && $('#stretch i').attr('class') === 'layui-icon layui-icon-spread-left') {
                        $('#stretch').find('i').addClass('layui-icon-shrink-right').removeClass('layui-icon-spread-left');
                        $('.layui-side-scroll .layui-logo,.layui-side-scroll .layui-nav-child,.layui-side-scroll cite,.layui-side-scroll .layui-nav-more').css("display", "");
                        $('.layui-side,.layui-side-scroll,.layui-side-scroll .layui-nav').animate({width: '200px'});//设置侧边栏的宽度
                        $('.tab,.layui-layout-left').animate({left: '200px'});
                    } else if ($('#stretch i').attr('class') === 'layui-icon layui-icon-shrink-right layui-icon-spread-left') {
                        //处理监听侧边栏的点击是无法删除layui-icon-shrink-right
                        $('#stretch').find('i').removeClass('layui-icon-shrink-right');
                    }
                });

                $('.body-shade').click(function () {
                    $('.body-shade').hide();
                    $('.layui-side,.layui-side-scroll,.layui-side-scroll .layui-nav').animate({width: '0px'});//设置侧边栏的宽度
                    $('.tab,.layui-layout-left').animate({left: '0px'});
                    $('#stretch i').addClass('layui-icon-spread-left').removeClass('layui-icon-shrink-right');
                });

                $('#btnLogout').click(function () {
                    layer.open({
                        title: '确认退出',
                        content: '您确定要退出系统？',
                        btn: ['确定', '取消'],
                        icon: 3,
                        yes: function (index, layero) { //按钮一的回调函数
                            location.href = "${contextPath}/logout";
                        }
                    });
                });
                $('#btnUpdatePwd').click(function () {
                    layer.open({
                        title: '修改密码',
                        type: 1,
                        area: ['300px', '280px'],
                        content: $('#resetPwd'),
                        btn: ['确定', '取消'],
                        yes: function () {
                            if ($('#pwd').val() == '' || $('#confirmedPwd').val() == '' || $('#newPwd').val() == '') {
                                layer.msg('请输密码！');
                                return false;
                            }
                            if ($('#confirmedPwd').val() != $('#newPwd').val()) {
                                layer.msg('密码不一致！');
                                return false;
                            }
                            var upOptions = {
                                url: '${contextPath}/modifypwd.json',
                                type: 'post',
                                success: function (rs) {
                                    if (rs.result) {
                                        layer.close(layer.index);
                                        layer.msg('密码修改成功！');
                                    } else {
                                        layer.close(layer.index);
                                        layer.msg(rs.message);
                                    }

                                }
                            }
                            $("#resetPwd").ajaxSubmit(upOptions);
                        }
                    });
                });
                $('#confirmedPwd').blur(function () {
                    if ($('#confirmedPwd').val() != $('#newPwd').val()) {
                        layer.msg('密码不一致！');
                    }
                });
                /*设置时间*/
                function getNowTime() {
                    var s = new Date();
                    var timeStr = s.getFullYear() + "年" + (s.getMonth() + 1) + "月" + s.getDate() + "日  ";
                    var weekDay = s.getDay();
                    weekDay = "星期" + "日一二三四五六".charAt(weekDay);
                    return timeStr + weekDay;
                }
                $('#timeshowId').html(getNowTime());
            });
            $('.about').click(function () {
                layer.open({
                    type: 1,
                    title: false,
                    closeBtn: 0,
                    content: $('.details'),
                    offset: 'r',
                    shadeClose: true,
                    anim: -1,
                    isOutAnim: false
                });
            });



        </script>
    </body>
</html>
